<template>
  <HeHelloWorld />
  <div class="courseContainer">
    <div class="coursebox">
      <ul class="route">
        <li>课程 ></li>
        <li>收费课 ></li>
        <li>2210大厂P5班</li>
      </ul>
      <div class="name">
        <h2>{{minchen.name}}</h2>
      </div>
      <div class="info">
        <div class="infonone">
          <img
            src="https://oss.xuexiluxian.cn/xiaoluxian-vcr/4820e28844b04e9391cba571b5e1c7ae.png"
            alt=""
            style="width: 100%; height: 100%"
          />
        </div>
        <ul class="teacherName">
          <li>张老师</li>
          <li>金牌讲师</li>
        </ul>
        <ul class="access">
          <li>难度</li>
          <li>中级</li>
          <li>.</li>
          <li>时长</li>
          <li>0.00</li>
          <li>.</li>
          <li>学习人数</li>
          <li>145</li>
          <li>.</li>
          <li>综合评分</li>
          <li>10.00</li>
        </ul>
      </div>
    </div>
    <div class="container-xl">
      <el-tabs v-model="activeName" class="demo-tabs" model-value="first" @tab-click="handleClick">
        <el-tab-pane label="课程章节" name="first">
          <div class="introduction">
            <div class="desc">{{minchen.name}}</div>
            <div class="buy-btn-container">
              <form action="/order/settlement" method="post">
                <input
                  type="hidden"
                  name="ids"
                  value="00e3969766f140059fb449f1e64df2ee::1"
                />
                <button type="submit" class="btn-item btn-danger">
                  立即购买
                </button>
              </form>
              <button type="button" class="btn-item btn-secondary" @click="ShoppingCart()">
                购物车
              </button>
            </div>
          </div>
          <div class="video" v-for="item in download" :key="item.id">
            <div class="chapterName">{{item.chapterName}}</div>
            <ul class="videos">
              <li class="video-item" v-for="q in item.children" :key="q.id">
                <div class="video-itemIcon">
                  <i class="fa fa-video-camera"></i>
                </div>
                <div class="item-name">
                  <span class="shipin">视频 {{q.attachmentType}}</span>
                  <span class="chapterName" v-if="q.publicType ==2">试看</span>
                </div>
                <a class="btn-learn" href="javascript:;">开始学习</a>
                <div class="clearfloat"></div>
              </li>
            </ul>
          </div>
        </el-tab-pane>
        <el-tab-pane label="下载资料" name="second">
             <div class="introduction" v-for="item in chapter" :key="item.id">
                 <div id="attachment" class="course-attachment active" v-if="download">
                    <div class="down">
                        <div class="source">
                            <span class="downloadCourse"><i class="fa fa-download"></i> 01 课程介绍 {{item.attachmentName}}</span>
                            <a href="javascript:;" class="btn btn-primary downloadbtn">下载资料</a>
                        </div>
                    </div>
                </div>
        </div>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
  <HelloBot />
</template>

<script>
import { useRoute } from "vue-router";
import { useRouter } from 'vue-router'
import HeHelloWorld from "@/components/homeTop/HelloWorld.vue";
import HelloBot from "@/components/helloBot/HelloBot.vue";
import { ref,onBeforeMount } from 'vue';
import axios from 'axios';
import { useStore } from 'vuex'

export default {
  name: "CourseDetails",
  components: {
    HeHelloWorld,
    HelloBot,
  },
  setup() {
    //   按照生命周期的顺序来排列：
    //首先在setup中定义
    const router = useRouter()

    const store = useStore()

    // 定义一个数据为判断
    let cousers = ref([]);
    const route = useRoute();

    let userId = route.params.id;

    // 章节数组变量
    let download = ref([]);

    let minchen = ref({id:"",name:""});

    // 下载质量数组变量
    let chapter = ref([]);

    console.log(userId);
    onBeforeMount(()=>{
        axios.get(`http://testapi.xuexiluxian.cn/api/course/getDetail?courseId=${userId}`)
        .then(res => {
            console.log(res.data.data.data)
            // 名称
            minchen.value.name = res.data.data.data.courseName;
            // 下载资料
            chapter.value = res.data.data.data.bizCourseAttachments;
            //章节
            download.value = res.data.data.data.bizCourseChapters;
        })
    })
    var ShoppingCart = () => {
      var arr =new Object(store.state.data);
      store.commit('shoppingadd',arr)
      console.log(store.state.shopping)
      router.push('shopping')
    }
    return {
      route,
      userId,
      cousers,
      chapter,
      download,
      minchen,
      router,
      ShoppingCart,
      store,
    };
  },
};
</script>

<style scoped>
.couserone{
    display: none;
}
.courseContainer {
  width: 100%;
  background: url(https://www.xuexiluxian.cn/resources/images/courseInfobg1920.png)
    no-repeat;
  background-size: 100% 200px;
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  align-items: center;
}
.coursebox {
  width: 1140px;
  height: 200px;
}
.route {
  display: flex;
}

.route li {
  color: aliceblue;
  margin-right: 10px;
  list-style-type: none;
}
li {
  list-style-type: none;
}
.name {
  color: aliceblue;
  padding: 10px;
  padding-left: 0px;
}
.info {
  display: flex;
  padding: 10px;
  padding-left: 0px;
}
.infonone {
  width: 60px;
  height: 60px;
  background: pink;
  border-radius: 50px;
  overflow: hidden;
}
.teacherName {
  color: aliceblue;
  padding: 10px;
}
.access {
  color: aliceblue;
  padding: 10px;
  display: flex;
  align-items: center;
  margin-left: 100px;
}
.access li {
  margin-right: 10px;
}
.container-xl {
  width: 1140px;
}
.demo-tabs > .el-tabs__content {
  padding: 32px;
  color: #6b778c;
  font-size: 32px;
  font-weight: 600;
}
.introduction {
  background: #ffffff;
  border-radius: 8px;
  overflow: hidden;
  border: solid 0.5px rgb(235, 232, 232);
}
.desc {
  padding: 20px;
  color: #474747;
  line-height: 35px;
}
.buy-btn-container {
  float: right;
  margin-top: 10px;
  padding: 0 20px 20px;
  width: 300px;
}
.buy-btn-container {
  float: right;
  margin-top: 10px;
  padding: 0 20px 20px;
  width: 300px;
}
.buy-btn-container button {
  float: left;
  margin-right: 10px;
  width: 120px;
  height: 40px;
  border-radius: 20px;
  outline: none;
  border: 0px;
  border: solid 0.5 black;
}
.video {
  margin: 20px 0;
  padding: 20px;
  background: #ffffff;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0px 3px 6px rgb(0 0 0 / 9%);
}
.video .chapterName {
  font-weight: bold;
  font-size: 20px;
  color: #333333;
}
.chapterDesc {
  margin: 10px 0;
  font-size: 13px;
  color: #5c5c5c;
}
ul,
li {
  list-style: none;
}
.video-item {
  height: 40px;
  line-height: 30px;
  padding: 5px 0;
  margin: 0 0 10px 0;
  border-radius: 8px;
}
ul,
li {
  list-style: none;
}
.video-item .item-name {
  width: 900px;
}
.video-itemIcon,
.item-name {
  float: left;
  padding-left: 10px;
}

.btn-learn {
  margin: 0 5px 0 0;
  float: right;
  width: 80px;
  height: 30px;
  line-height: 30px;
  border: 0px;
  outline: none;
  color: #fff;
  background: #388fff;
  border-radius: 12px;
  cursor: pointer;
  font-size: 14px;
  text-align: center;
}

.buy-btn-container button{
    color: aliceblue;
    background: rgb(220, 53, 69)
}
.course-main .active {
    display: block;
}
.down:first-child {
    margin: 40px 0 5px 0;
}
.down {
    margin: 10px auto !important;
    padding: 5px;
    background: #ffffff;
    border-radius: 8px;
    box-shadow: 0px 3px 6px rgb(0 0 0 / 9%);
}
.source {
    margin: 2px 0;
    display: flex;
    justify-content: space-between;
    line-height: 40px;
}
.route{
    padding: 10px;
}
.downloadbtn {
    width: 100px;
    border: none;
    border-radius: 8px;
    margin: 5px 0;
    font-size: 14px;
    text-align: center;
}
.btn-primary {
    color: #fff;
    background-color: #007bff;
    border-color: #007bff;
}
</style>